import "react-responsive-carousel/lib/styles/carousel.min.css";
import {Carousel} from "react-responsive-carousel";
import {FC} from "react";
// import banner1 from "@/assets/banners/banner1.jpg"
// import banner2 from "@/assets/banners/banner2.jpg"
// import banner3 from "@/assets/banners/banner3.jpg"
// import banner4 from "@/assets/banners/banner4.jpg"
// import banner5 from "@/assets/banners/banner5.jpg"

/**
 * @Description: banner组件
 * 由于antd提供的走马灯不支持拖拽，这里使用其他插件
 * @author zhaojiuyi
 * @date 2023/4/16
 */
const BannerList: string[] = ['banners/banner1.jpg', 'banners/banner2.jpg', 'banners/banner3.jpg', 'banners/banner4.jpg', 'banners/banner5.jpg']
export const Banner: FC = () => {
    return (
        <Carousel
            showArrows={false} //是否展示左右箭头
            showStatus={false} //是否展示右上角状态
            showIndicators={true} // 是否展示指示器
            infiniteLoop={true} //时候循环
            autoPlay={true} //是否自动播放
            stopOnHover={true} //  鼠标放上去是否停止播放
            showThumbs={false} // 是否展示轮播缩放展示图
            useKeyboardArrows={false} // 是否使用键盘左右按钮滑动
            swipeable={true} // 是否刷新
            dynamicHeight={true} //动态高度
            emulateTouch={true} // 是否拖拽滑动
        >
            {
                BannerList.map((item, index) => (
                    <img key={index} src={item} style={{width: "100%", height: "55vh"}} alt="banner"/>
                ))
            }
        </Carousel>
    )
}
